<template>
    <a-sub-menu :key="menuInfo.id" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <a-icon :type="menuInfo.systemMenuIcon || 'form'" /><span>{{ menuInfo.systemMenuName }}</span>
        </span>
        <template v-for="item in menuInfo.childrenSystemMenuList">
            <a-menu-item v-if="!isChildren(item)" :key="item.id" @click="$emit('setRouter',item)">
                <a-icon :type="item.systemMenuIcon || 'form'" />
                <span>{{item.systemMenuName}}</span>
            </a-menu-item>
            <sub-menu v-on="$listeners" v-else :key="item.id" :menu-info="item" />
        </template>
    </a-sub-menu>
</template>

<script>
    import { Menu } from 'ant-design-vue';
    export default {
        name: 'subMenu',
        data(){
            return{

            }
        },
        isSubMenu: true,
        props:{
            ...Menu.SubMenu.props,
            menuInfo:{}
        },
        methods:{
            isChildren(item){
                if(item.childrenSystemMenuList){
                    if(item.childrenSystemMenuList.length){
                        return true
                    }else{
                        return false
                    }
                }else{
                    return false
                }
            }
        }
    }
</script>

<style scoped>

</style>
